<template>
    <div class="component-title-cont border-bottom" :class="cname">
        <div class="component-title">
            <h2 v-if="InfoData.title&&InfoData.title.length > 0" class="title">{{InfoData.title}}</h2>
            <p v-if="InfoData.subTitle&&InfoData.subTitle.length > 0" class="sub-title">{{InfoData.subTitle}}</p>
            <router-link v-if="InfoData.catMore&&InfoData.catMore.length >0" class="cat-more" :to="InfoData.path" tag="span">{{InfoData.catMore}}</router-link>
        </div>
        <div class="component-cont">
            <slot></slot>
        </div>
    </div>
</template>

<script>
/*
    上标题 下内容 组件
*/
export default {
    name: 'titleComtentComponent',
    data ( ) {
        return {
        }
    },
    props: {
        InfoData: {
            type: Object,
            default ( ) {
                return {
                    title: '标题',
                    subTitle: '子标题',
                    catMore: '查看更多',
                    path: '/',//查看更多跳转路径
                }
            }
        },
        cname: '',//自定义样式class
    }
}
</script>

<style lang="stylus" scoped>
.component-title-cont
    width 100%
    height auto 
    box-sizing  border-box
    padding 10px
    .component-title
        width 100%
        height auto 
        overflow hidden
        position relative
        .title 
            font-size 20px
            color #0C0C0C
            height 30px 
            line-height 33px
            font-weight bold
        .sub-title 
            font-size 12px 
            color #A7A7A7
            height 20px
            line-height 18px
        .cat-more 
            font-size 14px
            color #FF3838
            position absolute
            right 0
            top 50%
            transform translate(0,-50%)
    .component-cont
        width 100%
        height auto 
        padding-top 10px
        overflow hidden
@import "~@/assets/css/titleContcustom.styl"
</style>